<template>
<div class='g-content-wrapper'>
  <header-top>市场资金</header-top>
  <div class="g-content">
    <state :type = "0"></state>
    <tab-line :tab-line="menuTabLine" :on-selected="tabLineSelected"></tab-line>

    <tab-bar :on-selected="tabBarSelected"></tab-bar>

    <chart-connect v-if = "tabLineIndex == 0" :chart-data = "chartConnectData" :aid="tabBarIndex"></chart-connect>
    <chart-overlap v-else :chart-data = "chartOverlapData" :aid="tabBarIndex"></chart-overlap>
    <div class="interval"></div><!--间隔-->

    <stock-distri :options="stkDistriOpts" :data="stkDistriData"></stock-distri>
    <div class="interval"></div><!--间隔-->

    <div v-if = "tabLineIndex == 0">
      <detail-list :list-type="listType"  :list-data="listData" :head-content = 'headContent' :updateTime="updateTime"></detail-list>
      <div class="interval"></div><!--间隔-->
    </div>

      <div class='comment'>
        <h1 class='comment-title'>市场资金</h1>
        <p>
          1、什么是市场资金<br>
          统计沪深两市所有股票的资金流入流出情况，从而得到整个A股市场的资金流入流出情况。<br>
          2、市场资金有什么用。<br>
          反映市场情绪
        </p>
      </div>
  </div>
</div>
</template>

<script>
import headerTop from '@/components/common/HeaderTop'
import state from '@/components/common/State'
import tabBar from '@/components/common/TabBar'
import tabLine from '@/components/common/TabLine'
import stockDistri from '@/components/common/StockDistri'
import detailList from '@/components/common/DetailList'
import chartConnect from '@/components/common/ChartConnect'
import chartOverlap from '@/components/common/ChartOverlap'

import constant from '@/common/constant'
import remoteDAO from '@/common/remoteDAO'
import { Loop } from '@/common/polling'
import { transform1013 } from '@/common/common'

const stkDataWash = data => data.TableInfo.map(item => {
  return {
    nPrice: item.Match,
    strName: item.stockname,
    strCode: item.stock,
    netFlowIn: item.bturnover,
    nAmount: item.zd,
    nRate: item.zdf
  }
})

export default {
  name: 'market',
  components: {
    headerTop,
    state,
    tabBar,
    tabLine,
    stockDistri,
    detailList,
    chartConnect,
    chartOverlap
  },
  data () {
    return {
      tabLineIndex: 0,
      tabBarIndex: 0,
      menuTabLine: [{
        name: '今日'
      }, {
        name: '近三个月'
      }],
      chartConnectData: {},
      chartOverlapData: null,
      headContent: ['流入标的', '现价', '净流入'],
      listType: 'c',
      listData: [],
      updateTime: '',
      stkDistriOpts: {
        title: '市场资金流动分布',
        positiveText: '净流入资金量',
        negativeText: '净流出资金量'
      },
      stkDistriData: {}
    }
  },
  methods: {
    tabLineSelected (index) {
      if (this.tabLineIndex == index) return;
      this.tabLineIndex = index;

      this.$store.dispatch('showLoading');
      if (this.tabLineIndex) {
        Loop.getInstance().unregister(this.fetchTodayData);
        this.fetchThreeMonthData();
      } else {
        Loop.getInstance().register(this.fetchTodayData);
      }
    },

    tabBarSelected (index) {
      if (this.tabBarIndex == index) return;
      this.tabBarIndex = index;

      this.$store.dispatch('showLoading');
      this.fetchData();
    },
    fetchData () {
      this.tabLineIndex ? this.fetchThreeMonthData() : this.fetchTodayData()
    },
    async fetchTodayData () {
      try {
<<<<<<< .mine
        this.$store.dispatch('showLoading');
||||||| .r40718
        this.$store.dispatch('showLoading');

=======
>>>>>>> .r40953
        const [index, chart] = await Promise.all([
          remoteDAO.getIndexMinList(['sh', 'sh', 'sz', 'cyb'][this.tabBarIndex]),
          remoteDAO.invoke(
            constant.InterfaceEnum.GET_C_M_FUND,
            { type: this.tabBarIndex }
          )
        ])

        const data = transform1013(chart);

        console.log(data)
        if (data.netNumber.length === 0) {
          throw new Error();
        }

        data.indexData = index.data;
        this.chartConnectData = data;
      } catch (error) {
        this.$store.dispatch('showError');
      }
    },

    async fetchModuleData () {
      const [up, down] = await Promise.all([
        remoteDAO.invoke(constant.InterfaceEnum.GET_C_M_MODULE, {type: 0}),
        remoteDAO.invoke(constant.InterfaceEnum.GET_C_M_MODULE, {type: 1})
      ])
      console.log(up)
      // console.log(down)
      const time = up.TableInfo.length > 0
        ? up.TableInfo[0].Time.slice(0, 4).padStart(12, '0')
        : down.TableInfo.length > 0
          ? down.TableInfo[0].Time.slice(0, 4).padStart(12, '0')
          : ''
      this.stkDistriData = {
        up: up.TableInfo,
        down: down.TableInfo,
        time: time
      };
    },

    async fetchStkData () {
      const res = await remoteDAO.invoke(constant.InterfaceEnum.GET_C_M_STOCK, { type: 1 })
      this.listData = stkDataWash(res).slice(0, 9);
    },

    async fetchThreeMonthData () {
      try {
        const [res, index] = await Promise
          .all([
            remoteDAO.invoke(constant.InterfaceEnum.GET_DAYS_FUND, {
              type: this.tabBarIndex,
              pType: 90 // 获取90天的市场资金量
            }),
            remoteDAO.invoke(constant.InterfaceEnum.GET_DAYS_INDEX, {
              type: this.tabBarIndex == 0 ? 1 : this.tabBarIndex,
              pType: 90 // 获取90天的收盘指数
            })
          ])

        const indexData = index.TableInfo.map(item => item.price);
        const data = {xTime: [], in: [], out: [], netNumber: [], indexData: indexData};
        res.TableInfo.forEach(item => {
          data.xTime.push(item.date);
          data.in.push(item.bmoney);
          data.out.push(item.smoney);
          data.netNumber.push(item.jlr);
        });
        this.chartOverlapData = data;
      } catch (err) {
        this.$store.dispatch('showError');
      }
    },

    transitionDone () {
      Loop.getInstance().register(this.fetchTodayData, this.fetchModuleData, this.fetchStkData);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../../assets/css/common.less';
</style>
